{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        #div-mid .btn-back {
            position: absolute;
            left: 20px;
            top: 20px;
            display: inline-block !important;
        }

        #question_info {
            color: white;
            list-style: none;
            font-size: 22px;
            padding: 0;
        }

        #question_info li {
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            transition-duration: 0.5s;
        }

        #question_info li:hover {
            background-color: rgba(0, 0, 0, 0.4);
            color: gold;
        }

        .question {
            display: none;
            text-align: center;
            font-size: 60px;
            margin-top: 40vh;
            color: #666666;
        }

        .question span {
            padding: 5px 15px 5px 15px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            color: white;
        }

        .question button {
            width: 120px;
            height: 50px;
            margin: 0 auto;
            font-size: 24px;
        }

        .question:nth-child(2) {
            display: block;
        }

        .question_collec {
            height: calc(100% - 609px);
            overflow: auto;
        }

        .question_collec a {
            width: 40px;
            margin: 3px;
        }

        #user-guide {
            position: absolute;
            left: calc(50% - 200px);
            width: 400px;
            background: white;
            top: calc(50% - 350px);
            border-radius: 10px;
            box-shadow: 1px 1px 4px black;
            text-align: center;
            padding: 20px;
            z-index: 9;
        }

        #ansresult {
            position: absolute;
            left: calc(50% - 200px);
            width: 400px;
            background: white;
            top: calc(50% - 350px);
            border-radius: 10px;
            box-shadow: 1px 1px 4px black;
            text-align: center;
            padding: 20px;
            z-index: 9;
        }

        #user-guide ol {
            padding: 0 0 0 20px;
            text-align: left;
            font-size: 16px;
        }

        #difficulty-choose {
            text-align: center;
        }

        #difficulty-choose select {
            width: 300px;
            height: 60px;
            font-size: 30px;
            background: none;
            border: none;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
        }

        #difficulty-choose option {
            background: none;
        }

        .diff-btn {
            padding-top: 30px;
        }

        .diff-btn button {
            transition-duration: 0.3s;
            width: 150px;
            height: 50px;
            font-size: 20px;
        }

    </style>
{% endblock %}

{% block maindiv %}
    <button type="button" class="btn btn-primary difficulty_btn2">返回测试</button>
    <div class="row" style="position: absolute;
    left: 35%;
    top: 37%;">
        <div id="difficulty-choose">

            <div class="diff-btn">
                <button type="button" class="btn btn-primary difficulty_btn1">开始答题</button>

            </div>
        </div>

    </div>
{% endblock %}



</div>
{% block content %}
    <div id="user-guide" class="animated bounceIn">
        <h3>请认真阅读后再答题哦</h3>
        <ol>
            <li>题目一共有{{ res.examq.qnums }}道</li>
            <li>时间和题目的错对数都会在右边显示出来的哦</li>
            <li>如果中途不想答题了，可以点击左上角的返回按钮哦</li>
            <li>每一题一旦提交就不能更改，知道你做完全部的题才能开始订正哦</li>
            <li>答题完可以按下回车<kbd>ENTER</kbd>键快速进入下一题哦</li>
            <li>右边也会显示所有题目的编号，可以点击切换题目，不过一定要把{{ res.examq.qnums }}道题全部答完才能结束答题</li>
            <li>关于分数的格式，例如"5分之3"应该写为"3/5",对应按键是键盘右边<kbd>SHIFT</kbd>按键左边的<kbd>/</kbd>按键</li>
            <li>关于带分数的格式，例如"2又3分之1"应该写为"2'1/3"，对应按键是键盘回车按键左边的<kbd>'</kbd>按键</li>
            <li>小数运算，除不尽请保留两位小数</li>
            <li>如果已经理解了，那么就点击下面的按钮开始作答吧</li>
        </ol>
        <button type="button" class="btn btn-primary" onclick="startFunc()">我已明白</button>
    </div>

    <div id="ansresult" class="animated bounceIn" style="display: none">
        <h3>考试成绩出来啦！</h3>
        <ol>
            <li>题目一共有{{ res.examq.qnums }}道</li>
            <li>您答对了&nbsp;<span class="rightnums" style="font-size: 30px"></span>道</li>
            <li>本次用时：<span class="hour" style="font-size: 30px"></span> 小时
                <span class="min" style="font-size: 30px"></span>分钟<span class="sec" style="font-size: 30px"></span>秒
            </li>
            <li>正确率为 &nbsp;<span class="rightrate" style="font-size: 30px"></span></li>
            <li>您以后也可以去我的成绩功能块中查看这次考试哦</li>


        </ol>
        <button type="button" class="btn btn-primary" onclick="backclass()">我已明白</button>
    </div>
{% endblock %}

{% block question %}
    <ul id="question_info">
        <li><i class="fa fa-clock-o fa-lg fa-fw"></i><span class="timer">用时：00:00:00</span></li>
        <li class="right_num animated"><i class="fa fa-check fa-lg fa-fw"></i>正确数：<span>0</span></li>
        <li class="wrong_num animated"><i class="fa fa-close fa-lg fa-fw"></i>错误数：<span>0</span></li>
    </ul>
    <div class="question_collec">

    </div>

{% endblock %}

{% block touxiang %}
    <div id="user_info">
        <div class="user_avatar" id="crop-avatar">
            <div class="avatar-view">
                <img src="{{ res.data.avatar_url }}" class="avatar-img" alt="Logo">
            </div>
            <div class="user_avatar_cover">点击编辑头像</div>
        </div>
        <span></span>
        <div class="user_info_panel">
            <div>Lv.126</div>
            <ul>
                <li>
                    <a>
                        <button type="button">信息修改</button>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('web.logout') }}">
                        <button class="logout"> 注销</button>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('web.logsuc') }}">
                        <button class="logout"> 首页</button>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script src="{{ url_for("static",filename="js/question.js") }}"></script>
    <script src="{{ url_for("static",filename="3rd/bootstrap-notify-master/js/bootstrap-notify.js") }}"
            type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var res = {{ res.examq|tojson }}
            console.log(res)
        $('#btn-login').css('display', 'none');
        $('#user_info span').css('display', 'block');
        $('#user_info span').text('你好呀,' + {{ res.data.nickname }});
        $('#user_info .user_info_panel div').text('ID:' +{{ res.data.id}});
        $('.user_info_panel').css('display', 'block');
        $('.user_avatar').on('mouseover', function () {
            $('.user_avatar_cover').css('display', 'block');
        }).css('cursor', 'pointer')
        $('.user_avatar').on('mouseout', function () {
            $('.user_avatar_cover').css('display', 'none');
        });

        $('.user_avatar').css('pointer-events', 'auto');
        $('.guest-page').css('display', 'none');
        $('.user-page').css('display', 'block');
        $('.avatar-img').attr('src', "{{ res.data.avatar_url}}");

        function startFunc() {
            $('#user-guide').remove();
        }
        function backclass() {
            window.location.href = "/class/{{ res.cid }}/exams"
        }
        var timer = {
            sec: '0' + 0,
            min: '0' + 0,
            hou: '0' + 0,
            startTimer: function () {
                this.sec = '0' + 0, this.min = '0' + 0, this.hou = '0' + 0;
                this.sec = '0' + 1;
                setTimer = setInterval(function () {
                    $('.timer').text('用时：' + this.hou + ':' + this.min + ':' + this.sec)
                    this.sec++;
                    if (this.sec == 60) {
                        this.sec = '0' + 0;
                        this.min++;
                    }
                    if (this.min == 60) {
                        this.min = '0' + 0;
                        this.hou++;
                    }
                    this.hou < 10 && this.hou.toString().length < 2 ? this.hou = '0' + this.hou : this.hou = this.hou;
                    this.min < 10 && this.min.toString().length < 2 ? this.min = '0' + this.min : this.min = this.min;
                    this.sec < 10 && this.sec.toString().length < 2 ? this.sec = '0' + this.sec : this.sec = this.sec;
                }.bind(this), 1000);
            },
            stopTimer: function () {
                clearInterval(setTimer);
            }
        }


        $('.difficulty_btn2').on('click', function () {
            window.location.href = "/class/{{ res.cid }}/exams"
        });

        $('#difficulty-choose .difficulty_btn1').on('click', function () {
            startTest(res);
        })


    </script>
{% endblock %}